<template>
  <div id="playlist-detail" v-loading="isLoading">
    <div :class="{ hidden: isLoading }">
      <detail-header :playlist="playlist" @imgLoad="imgLoad"/>
      <detail-tab-bar
        :titles="['歌曲列表', `评论(${playlist.commentCount})`, '收藏者']"
        @tabClick="tabClick"/>
      <song-list
        :trackIds="playlist.trackIds"
        ref="songListRef"
        @scrollUpdate="scrollUpdate"/>
    </div>
  </div>
</template>

<script>
import DetailHeader from './childrenCpns/DetailHeader.vue'
import DetailTabBar from './childrenCpns/DetailTabBar.vue'
import SongList from 'components/content/songlist/SongList.vue'
import { urlJointQuery } from 'utils'

export default {
  name: 'PlaylistDetail',
  data () {
    return {
      playlist: {},
      privileges: null,
      currentIndex: 0,
      id: null,
      isLoading: true
    }
  },
  props: {
    currentId: {
      type: Number,
      default () {
        return undefined
      }
    }
  },
  components: {
    DetailHeader,
    DetailTabBar,
    SongList
  },
  computed: {
    currentPath () {
      return urlJointQuery(this.$route.path, this.$route.query)
    }
  },
  watch: {
    currentPath () {
      this.saveId()
      this.$refs.songListRef.clearSongsData()
      this._getPlaylistDetail()
    }
  },
  created () {
    // path中含有playlist的时候才执行
    if (this.$route.path.indexOf('playlist') !== -1) {
      this.saveId()
    }
    setTimeout(() => {
      this._getPlaylistDetail()
    }, 0)
    this.scrollUpdate()
  },
  methods: {
    // 1. 刷新滚动条
    scrollUpdate () {
      this.$emit('scrollUpdate')
    },
    // 2. 获取歌单详情页内容
    async _getPlaylistDetail () {
      // this.$http.get()
      const result = await this.$http.get('/playlist/detail', { params: { id: this.id || this.currentId } })
      // console.log(result.data)
      // 获取失败
      if (result.status !== 200 || result.data.code !== 200) {
        this.$message.info('获取失败')
      }
      // 清空
      this.privileges = null
      this.playlist = null
      // 获取成功
      this.playlist = result.data.playlist
      this.privileges = result.data.privileges
      // 触发子组件的事件
      this.$refs.songListRef.getSongDetail()
    },
    // 3. 保存route的id
    saveId () {
      this.id = this.$route.query.id
    },
    // 4. tab修改
    tabClick (index) {
      this.currentIndex = index
    },
    imgLoad () {
      this.isLoading = false
      this.$emit('scrollUpdate')
    }
  }
}
</script>

<style scoped lang="less">
#playlist-detail {
  // width: 100%;
  min-height: 100%;
  position: relative;
}
</style>

<style lang="less">
#playlist-detail {
  .el-loading-mask {
    position: absolute;
    top: 0;
    bottom: 0;
  }
}
</style>
